<template>
    <div class="emplace">
        <div class="commonSearch">
            <div class="commonContent" style="height:40px">
                <el-form :model="searchForm" label-width="60px" size="mini" style="flex:22">
                    <el-form-item label="设备分组">
                        <tree-select @getId="getId" :clearable='false'></tree-select>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="reason">
            <el-tabs v-model="activeName" type="card" @tab-click="handleTableClick">
                <el-tab-pane label="黄灯原因" name="0">
                    <lightTable :activeName='activeName' lightType="0" :searchForm='searchForm' ref="amberLightTable" v-if="activeName == '0'"></lightTable>
                </el-tab-pane>
                <el-tab-pane label="红灯原因" name="1">
                    <lightTable :activeName='activeName' lightType="1" :searchForm='searchForm' ref="trafficLightTable" v-if="activeName == '1'"></lightTable>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
    import lightTable from './lightTable'
    export default {
        data() {
            return {
                searchForm: {
                    groupId:'',
                    lampColor:'0'
                },
                activeName:'0'
            }
        },
        components:{
            lightTable
        },
        mounted(){
            // this.$store.dispatch('lampTypeDropDownFn',{name:''})
            this.$store.dispatch('userListFn',{name:''})
        },
        methods: {
            //分组id
            getId(id) {
                this.searchForm.groupId = id
                this.handleGet()
                this.$store.dispatch('lampTypeDropDownFn',{groupId:id})
            },
            handleGet(){
                this.activeName == '0' ? this.$refs.amberLightTable.getList(this.searchForm) :
                    this.$refs.trafficLightTable.getList(this.searchForm)
            },
            //查询
            searchList() {

            },
            //选项卡
            handleTableClick(tab,event){
                this.searchForm.lampColor = tab.name
                this.$nextTick(()=>{
                    this.handleGet()
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    .emplace {
        .commonContent{
            border: 0;
            .el-form-item--mini.el-form-item {
                width: 33%;
            }
        }
        .reason {
            margin-top: 20px;

            /deep/ .el-tabs__item{
                font-size: 14px;
                font-weight: 650;
            }
        }
    }
</style>